/*
 * @Author: xiaosihan 
 * @Date: 2023-08-05 21:04:49 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-01-15 09:07:35
 */


import MyPhoto from "@/editorComponent/LeftMenu/MyPhoto/MyPhoto";
import NameNum from "@/editorComponent/LeftMenu/NameNum/NameNum";
import Sticker from "@/editorComponent/LeftMenu/Sticker/Sticker";
import TemplateList from "@/editorComponent/LeftMenu/TemplateList/TemplateList";
import Text from "@/editorComponent/LeftMenu/Text/Text";
import Layer from "@/editorComponent/LeftMenu/Layer/Layer";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useState } from "react";
import noviceTipStore from "../NoviceTip/noviceTipStore";
import styles from "./editorleftMenu.module.less";

import goodsPNG from "./img/goods.png";
import goods_hoverPNG from "./img/goods_hover.png";
import layerout_iconPNG from "./img/layerout_icon.png";
import layerout_icon_hoverPNG from "./img/layerout_icon_hover.png";
import name_numPNG from "./img/name_num.png";
import name_num_hoverPNG from "./img/name_num_hover.png";
import sticker_iconPNG from "./img/sticker_icon.png";
import sticker_icon_hoverPNG from "./img/sticker_icon_hover.png";
import templat_iconPNG from "./img/templat_icon.png";
import templat_icon_hoverPNG from "./img/templat_icon_hover.png";
import text_iconPNG from "./img/text_icon.png";
import text_icon_hoverPNG from "./img/text_icon_hover.png";
import upload_iconPNG from "./img/upload_icon.png";
import upload_icon_hoverPNG from "./img/upload_icon_hover.png";
import GoodsShowDetail from "@/editorComponent/LeftMenu/GoodsModule/GoodsShowDetail/GoodsShowDetail";
import userStore from "@/store/userStore";
import PreviewImgModal from "@/editorComponent/LeftMenu/PreviewImgModal/PreviewImgModal";


interface Iprops {
}

// 设计编辑器的左侧菜单
export default function EditorLeftMenu(props: Iprops) {

  const [tab, setTab] = useState(noviceTipStore.tab);

  useEffect(() => autorun(async () => {
    const { tab } = noviceTipStore;

    if ([2].includes(tab)) {
      const token = userStore.getState().userToken;
      if (!token.accessToken) {
        userStore.getState().actions.setShowLogin(true);
        return;
      }
    }
    setTab(tab)
  }, { delay: 10 }), []);

  const menunList = [
    { name: "产品", tab: 0, icon: goodsPNG, hover_icon: goods_hoverPNG },
    { name: "模版", tab: 1, icon: templat_iconPNG, hover_icon: templat_icon_hoverPNG },
    { name: "上传", tab: 2, icon: upload_iconPNG, hover_icon: upload_icon_hoverPNG },
    { name: "文字", tab: 3, icon: text_iconPNG, hover_icon: text_icon_hoverPNG },
    { name: "素材", tab: 4, icon: sticker_iconPNG, hover_icon: sticker_icon_hoverPNG },
    { name: "姓名号码", tab: 5, icon: name_numPNG, hover_icon: name_num_hoverPNG },
    { name: "图层", tab: 6, icon: layerout_iconPNG, hover_icon: layerout_icon_hoverPNG },
  ];

  return (
    <div className={styles.editorleftMenu}>
      <div className={styles.menu} >
        {
          menunList.map((menu, i) => {
            return (
              <div
                key={i}
                className={clsx(styles.menu_item, tab === menu.tab && styles.active)}
                onClick={() => noviceTipStore.setTab(menu.tab)}
              >
                <img
                  alt=""
                  src={tab === menu.tab ? menu.hover_icon : menu.icon}
                  className={styles.icon}
                />
                <span className={styles.lable} >{menu.name}</span>
              </div>
            );
          })
        }
      </div>
      <div className={styles.menu_container} >
        {tab === 0 && <GoodsShowDetail />}
        {tab === 1 && <TemplateList />}
        {tab === 2 && <MyPhoto />}
        {tab === 3 && <Text />}
        {tab === 4 && <Sticker />}
        {tab === 5 && <NameNum />}
        {tab === 6 && <Layer />}
        {/*图片预览组件 */}
        <PreviewImgModal />
      </div>
    </div>
  );

}